<template>
    <div>

        <base-list ref="carRecord" :condition="condition" :datas.sync="carRecord" :pageSearch="pageSearch">
            <el-form :inline="true" :model="condition" class="search-form" slot="search" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-button v-if="power('WJOB_GATE_CONTAINER_REGISTER:CANCEL')" @click="handleCancelRegister">
                            取消登记
                        </el-button>
                        <el-button @click="handleHistory">历史记录</el-button>
                        <el-button v-if="power('WJOB_GATE_CONTAINER_TICKET:PRINT')" @click="handlePrint">打印小票
                        </el-button>
                        <el-button v-if="power('WJOB_GATE_CONTAINER_TICKET:QUERY')" type="primary"
                                   @click="handlePrintRecord">小票打印记录
                        </el-button>
                    </el-col>
                </el-row>
                <el-alert title="" class="mt-20 alert-color" type="success" :closable="false">
                    <span>当前在港汽车数量：{{ totaled }}</span>
                    <span class="ml-20">提箱汽车数量：{{ exported }}</span>
                    <span class="ml-20">进场汽车数量：{{ imported }}</span>
                </el-alert>
            </el-form>
            <el-table slot="list" :data="carRecord" border stripe max-height="500">
                <el-table-column fixed="left" label="选择" width="50">
                    <template slot-scope="scope">
                        <el-radio class="radio" v-model="radio" :label="scope.$index"></el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="plateNumber" label="车牌号"  min-width="120"></el-table-column>
                <el-table-column prop="registerType" label="登记类型"  min-width="120">
                    <template slot-scope='scope'>
                        {{ scope.row.registerType | _filterRegisterType }}
                    </template>
                </el-table-column>
                <el-table-column prop="createDateTime" label="进港时间"  min-width="140"></el-table-column>
                <el-table-column prop="containerNoOne" label="箱号1"  min-width="120"></el-table-column>
                <el-table-column prop="purposeFieldOne" label="目的场位"  min-width="120"></el-table-column>
                <el-table-column prop="containerNoTwo" label="箱号2"  min-width="120"></el-table-column>
                <el-table-column prop="purposeFieldTwo" label="目的场位"  min-width="120"></el-table-column>
            </el-table>
        </base-list>
        <car-record-history ref="carRecordHistory"></car-record-history>
        <print-record ref="printRecord"></print-record>
    </div>
</template>

<script>
    import {
        getOnPortCar,
        cancelRegister,
        printTicket,
        getOnPortCount
    } from "@/api/middleControl/middleControl";
    import carRecordHistory from "./carRecordHistory";
    import printRecord from "./printRecord";

    export default {
        components: {
            carRecordHistory,
            printRecord
        },
        data() {
            return {
                carRecord: [],
                carRecordSelect: [],
                condition: {},
                pageSearch: getOnPortCar,
                radio: "",
                totaled: "",
                imported: "",
                exported: ""
            };
        },
        mounted() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.$refs.carRecord.loadData();
                getOnPortCount().then(res => {
                    const data = res.data;
                    this.totaled = data.totle;
                    this.imported = data.imported;
                    this.exported = data.export;
                });
            },
            handleCancelRegister() {
                const id = this.carRecord[this.radio] && this.carRecord[this.radio].id;
                if (id) {
                    this.$confirm("此操作将取消该登记记录, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                            cancelRegister(id).then(res => {
                                this.$message({ type: "success", message: "取消成功!" });
                                this.radio = "";
                                this.loadData();
                            })
                        }).catch(err => {
                            this.radio = "";
                        });
                } else {
                    this.$message({
                        type: "error",
                        message: "请选择一条数据!"
                    });
                }
            },
            handleHistory() {
                this.$refs.carRecordHistory.dialogForm = true;
                setTimeout(() => {
                    this.$refs.carRecordHistory.loadData();
                }, 300);
            },
            handlePrintRecord() {
                this.$refs.printRecord.dialogForm = true;
                setTimeout(() => {
                    this.$refs.printRecord.loadData();
                }, 300);
            },
            handlePrint() {
                const id =
                    this.carRecord[this.radio] && this.carRecord[this.radio].id;
                if (id) {
                    const origin = window.location.origin + window.location.pathname
                    window.open(origin + "/#/TicketPrint?id=" + id);
                } else {
                    this.$message({
                        type: "error",
                        message: "请选择一条数据!"
                    });
                }
            }
        }
    };
</script>

<style>
</style>
